<template>
  <div class="app-container">
    <!-- 限时活动 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
            <el-button type="primary" size="mini" @click="addlist" >新增</el-button>
      </div>
      <div>
        <el-table v-loading="loading" :data="marketList" border style="width: 100%">
            <el-table-column fixed  type="index" label="序号" width="50"> </el-table-column>
            <el-table-column    label="商品图片"  width="150">
                <template slot-scope="scope">
                    <img style="width:100%;height:auto" :src="scope.row.pic" alt="">
                </template>        
            </el-table-column>
            <el-table-column  label="活动时间"  width="250"> 
                <template slot-scope="scope" >
                    <div>开始时间:{{scope.row.promotionStartTime}}</div>
                    <div>结束时间:{{scope.row.promotionEndTime}}</div>
                </template>           
            </el-table-column>
            <el-table-column prop="date"  label="是否过期"  width="150">
              <template slot-scope="scope">
               <div>{{PastDue(scope.row.promotionEndTime)}}</div>     
              </template>
            </el-table-column>
            <el-table-column prop="name"  label="商品名称"  width="150"> </el-table-column>
            <el-table-column prop="brandName"  label="品牌名称"  width="150"> </el-table-column>
            <el-table-column prop="price"  label="商品价格"  width="150"> </el-table-column>
            <el-table-column prop="productCategoryName"  label="商品类别"  width="150"> </el-table-column>
            <el-table-column prop="createTime"  label="创建时间"  width="150"> </el-table-column>
            <el-table-column  fixed="right"  label="操作"  width="100">
            <template slot-scope="scope">
                <el-button style="color:red" type="text" size="small" @click="delmarket(scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 弹出窗口 -->
    <List  ref="list"/>
 
  </div>
</template>
<script>
import market from "@/api/market/list";
import List from "../components/list"

export default {
      components:{
        List
    },
  data() {
    return {
      //限时活动列表
      marketList: [],
      loading: false,    
      
    };
  },
  methods: {
    //获取限时活动列表
    init() {
      this.loading = true;
      market.findAllRecommends().then((res) => {
        // console.log(res);
        this.loading = false;
        if (res.success) {
          this.marketList = res.data.items;
          console.log(this.marketList)
        } else {
          this.$message.error("获取限时活动列表失败");
        }
      });
    },
    //新增
    addlist(){
        this.$refs.list.setList()
    },
    //活动是否会过期
    PastDue(end){
      var num =new Date().getTime()-new Date(end).getTime();
      return num>0?'过期':'否'

    },
    //删除限时活动
    delmarket(row){
        console.log(row)
        this.$confirm('是否确认删除该活动, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                     market.delRecommend(row.recommendId).then(res=>{
                         console.log(res)
                         if(res.success){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.init();
                        }else{
                            this.$message.error("删除限时活动失败")
                        }
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
                });
    },
         //每页条数pageSize 改变时会触发
    handleSizeChange(val){
      this.page.limit=val;
      this.init()
    },
    //当前页currentPage 改变时会触发
    handleCurrentChange(val){
      this.page.start=val;
      this.init()
    },
  },
  created() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/myScss";
</style>